<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>注册网易免费邮箱 - 中国第一大电子邮件服务商</title>
	<link rel="stylesheet" type="text/css" href="yu/css/123.css">
</head>
<body>
    <header class="header">
    <div class="bg">
     			</div>
     	<div class="links">
     		<a href="#">了解更多 </a>
  <a href="#">反馈意见</a>   		
     	</div>
    </header>
    <section class="content">
    <header class="content-tit">
    	<h1>欢迎注册无限容量的网易邮箱！邮件地址可以登录使用其他网易旗下产品。</h1>
    </header>
    <div class="mainBody">
        <div class="quywqwyu">
        <div class="regTxt">
               <ul>
                <li><a href="#" style="font-weight: bold;color: #fff;">注册字母邮箱</a></li>    
                  <li><a href="#">注册字母邮箱</a></li>    
                     <li><a href="#">注册字母邮箱</a></li>  
                 </ul> 
                </div>
                <div class="regFxt">
                    <dl class="regFxt-itm">
                        <dt class="regFxt-it">
                          <span class="txt-imp">*</span>邮箱地址
                        </dt>
                        <dd class="regFxt-i">
                            <input type="text" class="ipt">
                            <strong style="font-weight: bold;font-size: 14px;">@</strong>
                            <select>
                                <option selected="selected">163.com</option>
                                <option value="126.com">126.com</option>
                                <option value="yeah.net">yeah.net</option>
                            </select>
                            <div class="tip">
                                <span>6~18个字符，可使用字母、数字、下划线，需以字母开头</span>
                            </div>
                        </dd>
                    </dl>
                </div> 
                 <div class="regFxt">
                    <dl class="regFxt-itm">
                        <dt class="regFxt-it">
                          <span class="txt-imp">*</span>密码
                        </dt>
                        <dd class="regFxt-i">
                            <input type="text" class="ipt" style="width: 312px;">
                            <div class="tip">
                                <span>6~16个字符，五分大小写</span>
                            </div>
                        </dd>
                    </dl>
                </div>
                 <div class="regFxt">
                    <dl class="regFxt-itm">
                        <dt class="regFxt-it">
                          <span class="txt-imp">*</span>确认密码
                        </dt>
                        <dd class="regFxt-i">
                            <input type="text" class="ipt" style="width: 312px;">
                            <div class="tip">
                                <span>请再次填写密码</span>
                            </div>
                        </dd>
                    </dl>
                </div>
                    <div class="regFxt">
                    <dl class="regFxt-itm">
                        <dt class="regFxt-it">
                          <span class="txt-imp">*</span>手机号码
                        </dt>
                         <dd class="regFxt-i">
                            <input type="text" class="input ipt" style="padding-left: 35px;width:292px;  color:#000;" value="+86-" id=phoos>
                            <div class="itlSelect" id="itlSelect" style="display: none;">
                            <a href="#" class="flag-CN"><em></em>中国 +86</a>    
                            <a href="#" class="flag-AL"><em></em>阿尔巴尼亚(Shqipëria) +355</a>
                            <a href="#" class="flag-DZ"><em></em>阿尔及利亚(People's Democratic Republic of Algeria) +213</a>
                            <a href="#" class="flag-AF"><em></em>阿富汗(Republic of Afghanistan) +93</a>
                            <a href="#" class="flag-AR" data-code="+54"><em>&nbsp;</em>阿根廷(Argentina) +54</a>
                            <a href="#" class="flag-AE" data-code="+971"><em>&nbsp;</em>阿拉伯联合大公国(The United Arab Emirates) +971</a>
                            <a href="#" class="flag-AW" data-code="+297"><em>&nbsp;</em>阿鲁巴(Aruba) +297</a>
                            <a href="#" class="flag-OM" data-code="+968"><em>&nbsp;</em>阿曼(Sultanate of Oman) +968</a>
                            <a href="#" class="flag-AZ" data-code="+994"><em>&nbsp;</em>阿塞拜疆(Azərbaycan) +994</a>
                            <a href="#" class="flag-EG" data-code="+20"><em>&nbsp;</em>埃及(The Arab Republic of Egypt) +20</a>
                            <a href="#" class="flag-ET" data-code="+251"><em>&nbsp;</em>埃塞俄比亚(Ityop'iya) +251</a>
                            <a href="#" class="flag-IE" data-code="+353"><em>&nbsp;</em>爱尔兰(Ireland) +353</a>
                            <a href="#" class="flag-EE" data-code="+372"><em>&nbsp;</em>爱沙尼亚(Eesti) +372</a>


                            </div>
                           <div class="itl" style="width:35px;height:27px;line-height:27px;">
                                <div class="itl-fl" >
                                    <em></em>
                                </div>
                           </div>
                            <div class="tip">
                                <span>忘记密码时，可以通过该手机号码快速找回密码</span>
                            </div>
                        </dd>
                    </dl>
                </div> 

          </div>
        

  <aside class="mainBody-side">
            <div class="regExt">
              <img src="yu/img/reg_master.gif">
            </div>
        </aside>
   
    </section>
<script type="text/javascript">

        function itlSelect() {
           var links=document.querySelectorAll('.itlSelect a');
            // console.log('.itlSelect');
            for (var i = 0; i < links.length; i++) {
                links[i].addEventListener('click',function(e){
                    var a=e.target;
                    var txt=a.innerText;
                    var cls=a.className;
                    console.log(txt+"--"+cls);
                    // 获取“+”所在的位置
                    // txt.length-txt.indexOf('+');

                    var aiuy=txt.substr(txt.indexOf('+'),txt.length-txt.indexOf('+')) ;
                    document.querySelector('#phoos').setAttribute('value',aiuy);
                    var q=document.querySelector('.itl-fl');
                    q.className=" itl-fl "+cls;          


                })                
            }
        }
        function swiWsd(){
            var wewe=document.querySelector('.itl');
            // console.log(wewe);
            wewe.addEventListener('click',function(e){
                    var w=e.target;
            var qrwe=document.querySelector('#itlSelect');
            // console.log(links);
            // qrwe.style.display==="none"? qrwe.style.display="block":qrwe.style.display="none";
             
            if(qrwe.style.display==="none"){
                qrwe.style.display="block";
            }else{
                qrwe.style.display="none";
            }
          
            })

        }
        function jkakj(){
           var RegTxt=document.querySelectorAll('.regTxt ul li a');
           console.log(RegTxt);
           var Ul=document.querySelector('.regTxt ul');
           var oregFxt = document.querySelectorAll(".regFxt");
           // console.log(RegTxt);
           for (var i = 0; i < RegTxt.length; i++) {
                RegTxt[i].index=i;

               RegTxt[i].addEventListener('click',function(e){
                 var item=e.target;
                 // console.log(item.index);
                Ul.style.background='url(yu/img/tab.jpg) no-repeat 0-'+item.index*55.92+'px';
              
                
               
               })
           }
        }
        jkakj();
        swiWsd();
        itlSelect();      
        
    </script>



</body>
</html>
            
